<template>
    <view class="container">
        <view class="head">
            <view class="vip-icon-bg">
                <u-image src="/static/icon/10006.png" width="56" height="42" class="margin-auto" v-if="vipIconId"></u-image>
            </view>
            <view class="vip-name">{{ name }}</view>
            <view class="my-experience" @click="$u.$MRouter.experience.to()">
                <text>经验值</text>
                <text style="color: #b67740; margin: 0 10rpx 0 20rpx">{{ experience }}</text>
                <text class="icon icon-right"></text>
            </view>
        </view>
        <swiper class="swiper">
            <swiper-item>
                <view class="rights">
                    <view class="cover-info">
                        <view class="title">特权</view>
                        <view class="right-list">
                            <view class="right-item" v-for="(right, idx) in rights" :key="'icon' + idx" @click="showRightDtl(right)">
                                <u-image :src="`${global.BASE_URL_API}/file/file-view/annexFile/${right.icon}`" width="100" height="100" class="margin-auto"></u-image>
                                <view class="o-font-bold u-text-center" style="line-height: 60rpx">{{ right.name }}</view>
                            </view>
                        </view>
                        <view class="u-text-center tips">更多权限 敬请期待</view>
                    </view>
                </view>
            </swiper-item>
            <swiper-item v-if="rights2.length > 0">
                <view class="rights">
                    <view class="cover-info">
                        <view class="title">特权</view>
                        <view class="right-list">
                            <view class="right-item" v-for="(right, idx) in rights2" :key="'icon' + idx" @click="showRightDtl(right)">
                                <img-cache :src="`${global.BASE_URL_API}/file/file-view/annexFile/${right.icon}`" width="100" height="100" class="margin-auto"></img-cache>
                                <view class="o-font-bold u-text-center" style="line-height: 60rpx">{{ right.name }}</view>
                            </view>
                        </view>
                        <view class="u-text-center tips">更多权限 敬请期待</view>
                    </view>
                </view>
            </swiper-item>
        </swiper>

        <view class="vip-right-info"><u-parse :html="content"></u-parse></view>
        <!-- 权益 详情 弹窗 -->
        <u-popup v-model="show" mode="center" border-radius="10">
            <view class="right-bg" @touchmove.stop.prevent>
                <img-cache :src="`${global.BASE_URL_API}/file/file-view/annexFile/${selectRight.icon}`" width="100" height="100" class="img"></img-cache>
                <view class="name u-text-center">
                    {{ selectRight.name }}
                </view>
                <view class="desc u-text-center">
                    {{ selectRight.remark }}
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import global from '@/config'
import { useUserStore } from '@/store'

const vipIconId = ref('')
const name = ref('')
const experience = ref(0)
const rights = ref<Array<any>>([])
const rights2 = ref<Array<any>>([])
const selectRight = ref<any>({})
const show = ref(false)
const content = ref('')
const level = ref(0)
const userStore = useUserStore()

const $u = computed(() => {
    return uni.$u
})

function showRightDtl(right: any) {
    console.log(right)
    selectRight.value = right
    show.value = true
}

onMounted(() => {
    let config = userStore.config
    level.value = config.level
    name.value = config.name
    let id = userStore.userInfo.memberId
    uni.$u.$api.MemberApi.queryVipRight({ id }).then((res: any) => {
        let list = res.memberRightsDetailDtoList.map((m: any) => {
            return {
                icon: m.iconId,
                name: m.name,
                remark: m.remark
            }
        })
        // list = list.concat(list);
        content.value = res.remark
        vipIconId.value = res.iconId
        if (list.length > 8) {
            rights.value = list.slice(0, 7)
            rights2.value = list
        } else {
            rights.value = list
        }
        experience.value = res.experience
    })
})
</script>

<style scoped lang="scss">
.container {
    background-image: url(@/static/images/bg-vip-right.png);
    background-size: 100% 600rpx;
    background-repeat: no-repeat;
    padding-top: calc(var(--status-bar-height) + 44px);
    .head {
        display: flex;
        flex-direction: column;
        align-items: center;
        .vip-name {
            color: #f6ddbc;
            font-weight: bold;
            line-height: 100rpx;
            font-size: 34rpx;
            height: 100rpx;
        }
        .my-experience {
            background: linear-gradient(134deg, #fceedd, #ffdaa5);
            color: #b67740;
            padding: 20rpx 40rpx;
            border-radius: 40rpx;
            margin-bottom: 30rpx;
        }
        .vip-icon-bg {
            background-image: url(@/static/images/001.png);
            background-position: center;
            background-size: 100% auto;
            background-repeat: no-repeat;
            width: 50%;
            margin-top: 50rpx;
        }
    }
    .swiper {
        height: 570rpx;
    }
    .rights {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    .cover-info {
        width: 719rpx;
        height: 570rpx;
        border-radius: 10rpx;
        padding: 60rpx;
        position: relative;
        background-image: url(@/static/images/rights.png);
        background-size: 719rpx 570rpx;
        background-repeat: no-repeat;
        .title {
            font-size: 30rpx;
            font-weight: bold;
            text-align: center;
            background-image: url(@/static/icon/my/10005.png);
            background-size: 30% auto;
            background-repeat: no-repeat;
            background-position: center;
        }
        .right-list {
            display: flex;
            padding-top: 40rpx;
            flex-wrap: wrap;
            overflow: hidden;
        }
        .right-item {
            width: 25%;
        }
        .tips {
            position: absolute;
            width: 600rpx;
            bottom: 70rpx;
        }
    }
    .vip-right-info {
        margin-top: 20rpx;
    }
    .right-bg {
        width: 655rpx;
        background-color: #fde7c9;
        padding: 30rpx;
        line-height: 60rpx;
        .img {
            margin: 0 auto;
        }
        .name {
            font-weight: bold;
        }
    }
}
.margin-auto{
    margin: 0 auto;
}
</style>
